<template>
  <el-dialog
    :title="editId?'编辑经纪':'新增经纪'"
    :visible="isshowDialog"
    @close="btnCancel"
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="ruleForm.desc" />
      </el-form-item>
      <el-form-item label="封面" prop="image">
        <ImageUploads ref="addImage" :file-image="fileImage" />
      </el-form-item>

    </el-form>
    <el-row slot="footer" type="flex" justify="end">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btOk">确认</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>

</template>

<script>
import { addAgentsList, addAgentsData } from '@/api/agents'
// import { login } from '@/api/user'
import ImageUploads from '@/components/ImageUploads/index.vue'
export default {
  components: {
    ImageUploads
  },
  props: {
    isshowDialog: {
      type: Boolean,
      default: false
    },
    editId: {
      type: Number,
      default: null
    },
    tableData: {
      type: Array,
      default: null
    }

  },
  data() {
    return {
      ruleForm: {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入', trigger: 'blur' }
        //   { RegExp: /^\d{9}$/, message: '请输入', trigger: 'blur' }
        ]
      },
      fileImage: null

    }
  },
  watch: {
    async editId(newVal, oldVal) {
      if (this.editId !== null) {
        const index = await this.tableData.findIndex(item => item.id === this.editId)
        this.ruleForm = this.tableData[index]
        this.fileImage = this.ruleForm.image
        this.$refs.addImage.fileList.push({ url: this.fileImage })
      } else {
        this.fileImage = null
        this.ruleForm = {
          name: '',
          email: '',
          phone: '',
          address: '',
          desc: '',
          image: ''
        }
      }
    }
  },
  methods: {
    async btOk() {
      await this.$refs.ruleForm.validate()
      if (this.editId) {
        await addAgentsData({ ...this.ruleForm, image: this.$refs.addImage.fileList[0].url, id: this.editId })
      } else {
        await addAgentsList({ ...this.ruleForm, image: this.$refs.addImage.fileList[0].url })
      }
      this.$refs.addImage.delImages()
      await this.$parent.AgentsLis()
      this.$emit('update:isshowDialog', false)
    },
    btnCancel() {
      this.fileImage = null
      // this.editId = null
      this.$emit('update:editId', null)
      this.ruleForm = {
        name: '',
        email: '',
        phone: '',
        address: '',
        desc: '',
        image: ''
      }
      this.$refs.addImage.delImages()
      this.$emit('update:isshowDialog', false)
    }

  }
}
</script>
<style lang="scss" >
//  .el-dialog__header{
//     background-color: #fff;
//   .el-dialog__title{
//         color: #000;

//     }
// }
</style>
